const container = document.querySelector("#cesiumContainer");
const M = {
  longitude: {
    min: 80,
    max: 120,
  },
  latitude: {
    min: 20,
    max: 40,
  },
  height: {
    min: 0,
    max: 100000,
  },
};

const positions = new Array(10).fill(null).map((item, index) => {
  const html = document.createElement("div");
  html.className = `test-html test-html-${index}`;
  html.innerText = `test-text-${index}`;
  container.appendChild(html);
  return {
    longitude:
      Math.random() * (M.longitude.max - M.longitude.min) + M.longitude.min,
    latitude:
      Math.random() * (M.latitude.max - M.latitude.min) + M.latitude.min,
    height: Math.random() * (M.height.max - M.height.min) + M.height.min,
  };
});

viewer.scene.postRender.addEventListener(() => {
  positions.forEach((position, index) => {
    const { longitude, latitude, height } = position;
    const cartesian3 = Cesium.Cartesian3.fromDegrees(
      longitude,
      latitude,
      height
    );
    const cartesian2 = Cesium.SceneTransforms.wgs84ToWindowCoordinates(
      viewer.scene,
      cartesian3
    );
    if (!cartesian2) return;
    const { x, y } = cartesian2;
    const html = document.querySelector(`.test-html-${index}`);
    if (!html) return;
    html.style.top = y + "px";
    html.style.left = x + "px";
  });
});
